<template>
  <div class="Foodclassification">
    <swiper :options="swiperOption">
      <swiper-slide>
        <Figuer v-for="(item, index) in foodClassOne" :key="index" :title="item.title"
          :imgUrl="'https://fuss10.elemecdn.com' + (item.image_url)" @getType="getType1(index)"></Figuer>
      </swiper-slide>
      <swiper-slide>
        <Figuer v-for="(item, index) in foodClassTwo" :key="index" :title="item.title"
          :imgUrl="'https://fuss10.elemecdn.com' + (item.image_url)" @getType="getType2(index)"></Figuer>
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  import Figuer from '@/components/Figure.vue'
  export default {
    name: "Foodclassification",
    data() {
      return {
        foodClassOne: [],
        foodClassTwo: [],
        swiperOption: {
          //显示分页
          pagination: '.swiper-pagination',
          paginationClickable: true,
          //开启循环模式
          loop: false,
        }
      }
    },
    methods: {
      getType1(index) {
        this.$router.push({
          name: "FoodType",
          query: {
            type: this.foodClassOne[index].title,
            id: this.foodClassTwo[index].id
          },
        });
      },
      getType2(index) {
        this.foodClassTwo[index].title;
        this.$router.push({
          name: "FoodType",
          query: {
            type: this.foodClassTwo[index].title,
            id: this.foodClassTwo[index].id
          },
        });
      }
    },
    created() {
      //获取食品分类列表存于foodClass
      this.axios.get(this.$url + "/v2/index_entry").then((res) => {
        let data = res.data;
        for (let i = 0; i < data.length; i++) {
          if (i >= data.length / 2) {
            this.foodClassTwo.push(data[i]);
          } else {
            this.foodClassOne.push(data[i]);
          }
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    components: {
      Figuer,
    }
  }
</script>

<style lang="less">
  .swiper-container {
    padding: 25px 0;
  }

  .swiper-pagination-bullet {
    width: 15px !important;
    height: 15px !important;
    margin: 0 10px !important;
  }
</style>